<template>
    <div >
      <group label-width="5em" >
        <cell primary="content" title="头像" @click.native="upLoad">
          <div class="user-img">
            <img :src="src">
          </div>
        </cell>
        <cell title="昵称" :value="userName" ></cell>
        <cell title="账号" :value="userNumber" ></cell>
      </group>
      <group label-width="5em" >
        <cell title="我的地址" @click.native="onClick">
          <div>
            <span>{{StorAddress==''?address:StorAddress}}</span>
          </div>
        </cell>
      </group>

      <router-view></router-view>

      <div v-transfer-dom>
        <loading :show="show" text=""></loading>
      </div>

    </div>
</template>

<script>
  import { XInput,Group,XButton,Cell,Loading,Toast,TransferDomDirective as TransferDom   } from 'vux'
  import {getUid} from '@/utils/auth'
  import store from '../../store'
    export default {
      name: "userInfo",
      directives: {
        TransferDom
      },
      components: {
        XInput,
        Group,
        XButton,
        Cell,
        Loading,
        Toast,
      },
      data(){
        return{
          userName:"小美",
          src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=676151664,1136836653&fm=27&gp=0.jpg',
          userNumber:'35465465454',
          address:'湖北省武汉市洪山区黄鹤楼顶楼110室',
          files:[],
          server:'http://demo.dcloud.net.cn/helloh5/uploader/upload.php',
          show:false,
        }
      },
      computed:{
        StorAddress(){
          return store.state.appdata.address;
        }
      },
      mounted(){

      },
      methods:{
        onClick(){
          this.$router.push({path:'/userInfo/address'});
        },
        upLoad(){
          console.log('上传图片');
          let _this = this;
          plus.gallery.pick(function(p){
            _this.appendFile(p);
          });
        },
        appendFile(p){
          let n=p.substr(p.lastIndexOf('/')+1);
          console.log(n);
          let file = [];
          file.push({name:"uploadkey",path:p});
          this.files = file;
          console.log('文件：');
          console.log(file);
          //this.upload();
        },
        upload(){
          let files = this.files;
          let server = this.server;
          let _this = this;
          if(files.length<=0){
            plus.nativeUI.alert("没有添加上传文件！");
            return;
          }
          console.log("开始上传：");
          this.show = true;
          let task=plus.uploader.createUpload(server,
            {method:"POST"},
            function(t,status){ //上传完成
              if(status==200){
                console.log("上传成功："+t.responseText);
                _this.show = false;
                //plus.storage.setItem("uploader",t.responseText);
                _this.$store.commit('SET_USERIMG', t.responseText);
              }else{
                console.log("上传失败："+status);
                _this.show = false;
              }
            }
          );
          task.addData("client","HelloH5+");
          task.addData("uid",getUid());
          for(let i=0;i<files.length;i++){
            let f=files[i];
            task.addFile(f.path,{key:f.name});
          }
          task.start();
        },
      }
    }
</script>

<style scoped>
.user-img{
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  float: right;
}
.user-img img{
  width: 100%;
}
</style>
